@import (reference) "../../../app/less/app-icons";
@import (reference) '../../../app/less/typography';
@import (reference) 'config';
@import (reference) 'icons';

.tx-block-wrapper {
  border-radius: @border-radius;
  box-shadow: @shadow-type-1;
  background: @color-white;
}

.status-label,
.status-label-min {
  width: auto;
  padding: 4px 11px;
  border-radius: @border-radius;
  text-transform: uppercase;
  color: @color-submit-400;
  background-color: @color-bluebar-200;
  margin: 0 0 0 6px;
  white-space: nowrap;

  &.success,
  &.confirmed {
    background: @color-success-50;
    color: @color-success-400;
  }

  &.warning,
  &.unconfirmed {
    background: rgba(255, 175, 0, 0.1);
    color: @color-warning-500;
  }

  &.error,
  &.cancelled {
    background: rgba(239, 72, 41, 0.1);
    color: @color-error-500;
  }

  &.active {
    color: @color-submit-400;
    background-color: @color-bluebar-200;
  }

  &.inactive {
    background-color: @asset-label-suspicious;
    color: @color-black;
  }
}

.asset__text {
  .js-stars-container {
    margin-top: 1px;
  }
}

.status-label-min {
  .caption-3();
  padding: 2px 6px;
  //margin-top: 4px;
  border-radius: @border-radius / 2;
  text-transform: uppercase;
}

w-transaction .transaction {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  min-height: 74px;
  align-items: center;
  position: relative;

  .status-label-min {
    &.inactive {
      margin-bottom: -1px;
    }
    &:not(.inactive) {
      position: absolute;
      right: 43px;
      bottom: 15px;
    }
  }

  .exchange-type {
    white-space: nowrap;
    margin-right: 5px;
  }

  .icon {
    position: relative;
    width: 48px;
    height: 48px;
    min-width: 48px;
    margin: auto 20px auto 20px;
    border-radius: 50%;

    &::before {
      content: '';
      position: absolute;
      width: @tx-icon-size;
      height: @tx-icon-size;
      overflow: hidden;
      left: 9px;
      top: 9px;
      background-position-y: 0;
      display: none;
      background: url(/img/icons/transaction-icons-30.svg);
      background-repeat: no-repeat;
    }

    &.send {
      .icon-tx-send();
    }

    &.receive {
      .icon-tx-receive();
    }

    &.mass-send {
      .icon-tx-mass-transfer();
    }

    &.mass-receive {
      .icon-tx-mass-receive();
    }

    &.circular {
      .icon-tx-circular();
    }

    &.issue {
      .icon-tx-issue();
    }

    &.reissue {
      .icon-tx-reissue();
    }

    &.burn {
      .icon-tx-burn();
    }

    &.exchange-buy,
    &.exchange-sell {
      .icon-tx-exchange();
    }

    &.create-alias {
      .icon-tx-create-alias();
    }

    &.lease-in {
      .icon-tx-incoming-leasing();
    }

    &.lease-out {
      .icon-tx-lease();
    }

    &.cancel-leasing {
      .icon-tx-cancel-leasing();
    }

    &.unknown {
      .icon-tx-unknown();
    }

    &.data {
      .icon-tx-data();
    }

    &.data-vote {
      .icon-tx-data-vote();
    }

    &.sponsorship-start {
      .icon-tx-sponsorship-start();
    }

    &.sponsorship-stop {
      .icon-tx-sponsorship-stop();
    }

    &.sponsorship-fee {
      .icon-tx-sponsorship-plus();
    }

    &.set-script {
      .icon-tx-set-script();
    }

    &.set-script-cancel {
      .icon-tx-cancel-script();
    }

    &.set-asset-script {
      .icon-tx-set-asset-script();
    }

    &.script-invocation {
      .icon-tx-script-invocation();
    }
  }

  &.spam .icon {
    &.receive {
      .icon-tx-spam();
    }

    &.mass-receive {
      .icon-tx-mass-spam();
    }
  }

  .status-label-min.inactive {
    display: none;
  }

  .spam {
    .status-label-min.inactive {
      display: block;
    }
  }

  .transaction-info {
    display: flex;
    flex-direction: row;
    width: 100%;

    .full-width {
      width: 100%;
    }

    .line-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .line {
        height: 50%;
        flex-basis: 50%;
        box-sizing: border-box;
        overflow: hidden;
        color: @color-basic-700;

        &:last-child {
          padding-right: @padding-main-layout * 4.4;
          text-align: right;

          .top {
            word-break: break-all;
          }
        }

        .top {
          .spam-label {
            display: none;
          }

          .ellipsis {
            max-width: 120px;
          }
        }
        .bottom {
          color: @color-basic-500;
        }
      }

      &.grow .line {
        flex-basis: auto;
        flex-grow: 1;

        &:last-child {
          flex-grow: 0;
        }
      }
    }
  }

  &.spam {
    .icon {
      &.send,
      &.receive,
      &.circular,
      &.exchange-buy,
      &.exchange-sell,
      &.reissue,
      &.sponsorship-start,
      &.sponsorship-stop,
      &.sponsorship-fee,
      &.mass-send,
      &.set-asset-script {
        background-color: @color-disabled-50;
        &::before {
          background-position-y: bottom;
        }
      }
    }

    .transaction-info {
      .line-wrapper {
        .line {
          color: @color-basic-500;

          .bottom {
            color: @color-accent-100;
          }

          .status-label-min {
            display: inline-block;
            top: auto;
            bottom: 3px;
            margin-top: 0;
            right: auto;
          }
        }
      }
    }
  }
}

.transaction-amounts {
  max-width: 100%;
  display: inline-block;
}

@media screen and (max-width: 960px) {
  .leasing w-transaction .transaction {
    .icon {
      margin-right: 20px;
    }

    .status-label-min {
      right: 40px;
      top: 24px;
      bottom: auto;
    }

    .transaction-info {

      .line-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px 0;

        .line {
          height: 50%;

          .locale-address {
            display: none;
          }

          .bottom.fs-mobile {
            font-size: @mobile-low-fsize;
          }

          .top.fs-mobile {
            font-size: @mobile-mid-fsize;
          }

          &:last-child {
            padding-right: 0;
            text-align: left;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  w-transaction .transaction {
    .icon {
      margin: auto 20px auto 20px;
    }

    .transaction-info {

      .line-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px 0;

        .line {
          height: 50%;

          .locale-address {
            display: none;
          }

          .top.fs-mobile {
            font-size: @mobile-mid-fsize;
            line-height: 1.2em;
          }

          .bottom.fs-mobile {
            font-size: @mobile-low-fsize;
            line-height: 1.2em;
            padding-top: 3px;
          }

          &:last-child {
            padding-right: 0;
            text-align: left;
          }
        }
      }
    }

    &.spam {
      .transaction-info {
        .line-wrapper {
          .line {
            .top {
              .status-label-min {
                position: absolute;
                right: 43px;
                bottom: 44px;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 540px) {
  md-dialog {
    w-transaction .transaction {
      .status-label-min {
        right: 10px;
      }
    }
  }
}
